<template>
  <div class="health-container">
    <!-- 导航栏 -->
    <header>

    </header>


    <!-- 主要内容 -->
    <main class="main-content">
      <div class="container">
        <h2>服务跟踪</h2>

        <!-- 服务跟踪列表 -->
        <div class="service-track-cards">
          <div v-for="track in serviceTrackList" :key="track.id" class="service-card">
            <div class="card-header">
              <h3>预约ID: {{ track.appointmentId }}</h3>
              <div class="status-badge" :class="track.status">
                {{ getStatusText(track.status) }}
              </div>
            </div>

            <div class="card-body">
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">服务类型:</span>
                  <span class="value">{{ track.serviceType }}</span>
                </div>

                <div class="info-item">
                  <span class="label">用户ID:</span>
                  <span class="value">{{ track.userId }}</span>
                </div>

                <div class="info-item">
                  <span class="label">陪诊员ID:</span>
                  <span class="value">{{ track.escortId || '未分配' }}</span>
                </div>

                <div class="info-item">
                  <span class="label">创建时间:</span>
                  <span class="value">{{ formatDateTime(track.createTime) }}</span>
                </div>
              </div>

              <div class="remark-section" v-if="track.remark">
                <span class="label">备注:</span>
                <p class="remark-text">{{ track.remark }}</p>
              </div>

              <!-- 状态时间线 -->
              <div class="timeline-section">
                <el-timeline>
                  <el-timeline-item
                      v-for="(event, index) in statusEvents"
                      :key="index"
                      :timestamp="getEventTimestamp(track, event.value)"
                      :color="getEventColor(track.status, event.value)"
                      :hide-timestamp="!getEventTimestamp(track, event.value)"
                  >
                    {{ event.label }}
                    <span v-if="getEventTimestamp(track, event.value)" class="timestamp-text">
                      ({{ formatDateTime(getEventTimestamp(track, event.value)) }})
                    </span>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
          </div>

          <div v-if="serviceTrackList.length === 0" class="empty-state">
            <el-empty description="暂无服务跟踪数据" />
          </div>

          <!-- 分页控件 -->
          <div class="pagination-container" v-if="serviceTrackList.length > 0">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[8]"
                :background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalTracks"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer style="background-color: #f5f7fa; padding: 20px 0; border-top: 1px solid #e6e6e6;">
      <div class="container">
        <div class="footer-content" style="text-align: center;">
          <p style="color: #666; margin-bottom: 10px;">安心陪诊后台管理系统</p>
          <p style="color: #999; font-size: 12px;">
            &copy; 2025 安心陪诊平台 版权所有 |
            <a href="#" @click.prevent="goToUserAgreement" style="color: #999;">用户协议</a> |
            <a href="#" @click.prevent="goToPrivacyPolicy" style="color: #999;">隐私政策</a>
          </p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const router = useRouter();


const serviceTrackList = ref([]);
const activeDropdown = ref(null);
const hoverTimeout = ref(null);
const loading = ref(true);

// 搜索和筛选相关
const searchQuery = ref('');
const statusFilter = ref(null);
const serviceTypeFilter = ref(null);

// 分页相关 - 修改为每页8条
const currentPage = ref(1);
const pageSize = ref(8);
const totalTracks = ref(0);

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchServiceTracks();
};

// 处理每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1; // 重置到第一页
  fetchServiceTracks();
};

// 状态选项
const statusOptions = ref([
  {value: 'created', label: '已创建'},
  {value: 'confirmed', label: '已确认'},
  {value: 'started', label: '已开始'},
  {value: 'completed', label: '已完成'},
  {value: 'cancelled', label: '已取消'}
]);

// 服务类型选项 (根据实际业务调整)
const serviceTypeOptions = ref([
  '普通陪诊',
  '专业陪护',
  '接送服务',
  '检查陪同',
  '住院陪护'
]);

// 状态时间线事件
const statusEvents = ref([
  {value: 'created', label: '服务创建'},
  {value: 'confirmed', label: '服务确认'},
  {value: 'started', label: '服务开始'},
  {value: 'completed', label: '服务完成'}
]);


// 获取服务跟踪列表
const fetchServiceTracks = async () => {
  try {
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value
    };

    if (searchQuery.value) {
      params.search = searchQuery.value;
    }

    if (statusFilter.value) {
      params.status = statusFilter.value;
    }

    if (serviceTypeFilter.value) {
      params.serviceType = serviceTypeFilter.value;
    }

    const response = await axios.post(BASE_URL + '/v1/manager/serviceTrack', {}, {
      params,
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('managerToken')}`
      }
    });

    if (response.data.state === 2000) {
      serviceTrackList.value = response.data.data || [];
      totalTracks.value = response.data.total || 0;
    } else {
      ElMessage.error(response.data.message || "获取服务跟踪列表失败");
    }
  } catch (error) {
    console.error("获取服务跟踪列表出错:", error);
    ElMessage.error(error.response?.data?.message || "获取服务跟踪列表失败");
  }
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'created': '已创建',
    'confirmed': '已确认',
    'started': '已开始',
    'completed': '已完成',
    'cancelled': '已取消'
  };
  return statusMap[status] || status;
};

// 获取事件时间戳 (根据实际业务逻辑调整)
const getEventTimestamp = (track, eventStatus) => {
  // 这里需要根据实际业务逻辑返回相应的时间戳
  // 示例中简单使用createTime作为所有事件时间
  if (eventStatus === 'created') return track.createTime;
  return null;
};

// 获取事件颜色
const getEventColor = (currentStatus, eventStatus) => {
  const statusOrder = ['created', 'confirmed', 'started', 'completed'];
  const currentIndex = statusOrder.indexOf(currentStatus);
  const eventIndex = statusOrder.indexOf(eventStatus);

  if (eventIndex === -1) return 'gray';
  if (eventIndex < currentIndex) return 'green';
  if (eventIndex === currentIndex) return 'blue';
  return 'gray';
};

// 格式化日期时间
const formatDateTime = (dateString) => {
  if (!dateString) return "未知时间";
  const date = new Date(dateString);
  return date.toLocaleString();
};

const goToUserAgreement = () => {
  router.push("/userAgreement");
};

const goToPrivacyPolicy = () => {
  router.push("/privacyPolicy");
};


onMounted(() => {
  fetchServiceTracks();
});
</script>

<style scoped>
.health-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8fafc;
}

.main-content {
  flex: 1;
  padding: 30px 0;
}

.container {
  max-width: 1600px; /* 增加容器宽度以容纳更多卡片 */
  margin: 0 auto;
  padding: 0 25px;
}

h2 {
  font-size: 24px;
  color: #1a365d;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 600;
}

/* 服务跟踪卡片容器 - 修改为4列布局 */
.service-track-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* 服务卡片样式 */
.service-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
  height: 100%; /* 确保卡片高度一致 */
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: #cbd5e0;
}

.card-header {
  padding: 15px 20px;
  background-color: #f7fafc;
  border-bottom: 1px solid #edf2f7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  color: #2d3748;
  font-weight: 500;
}

.status-badge {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  color: white;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.status-badge.created {
  background-color: #ed8936;
}

.status-badge.confirmed {
  background-color: #4299e1;
}

.status-badge.started {
  background-color: #48bb78;
}

.status-badge.completed {
  background-color: #718096;
}

.status-badge.cancelled {
  background-color: #f56565;
}

.card-body {
  padding: 20px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 15px;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.label {
  font-weight: 500;
  color: #4a5568;
  margin-bottom: 5px;
  font-size: 13px;
}

.value {
  color: #2d3748;
  font-size: 14px;
  word-break: break-word;
}

.remark-section {
  margin: 15px 0;
  padding: 12px;
  background-color: #f8fafc;
  border-radius: 8px;
  border-left: 3px solid #4299e1;
}

.remark-text {
  margin-top: 6px;
  color: #4a5568;
  line-height: 1.5;
  font-size: 13px;
}

.timeline-section {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e2e8f0;
}

.timestamp-text {
  font-size: 11px;
  color: #718096;
  margin-left: 5px;
}

/* 时间线样式调整 */
:deep(.el-timeline-item__node) {
  width: 12px;
  height: 12px;
}

:deep(.el-timeline-item__tail) {
  left: 5px;
}

:deep(.el-timeline-item__timestamp) {
  color: #718096;
  font-size: 12px;
}

/* 空状态样式 */
.empty-state {
  grid-column: 1 / -1;
  padding: 60px 0;
  text-align: center;
}

/* 分页样式 */
.pagination {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

/* 响应式设计 */
@media (max-width: 1600px) {
  .service-track-cards {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

@media (max-width: 1400px) {
  .service-track-cards {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (max-width: 1200px) {
  .service-track-cards {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 992px) {
  .container {
    padding: 0 20px;
  }

  .service-track-cards {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .service-track-cards {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }

  .filter-section {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  h2 {
    font-size: 20px;
  }

  .container {
    padding: 0 15px;
  }

  .card-body {
    padding: 15px;
  }
}

/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

body {
  background-color: #f8fafc;
  color: #2d3748;
  line-height: 1.6;
}
</style>